﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <style>
        .demo-login-container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
        }

        .layui-form-item.layui-inline {
            width: 48%; /* 设置每个表单项的宽度 */
            margin-right: 4%; /* 添加间距 */
            box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
        }

            .layui-form-item.layui-inline:nth-child(2n) {
                margin-right: 0; /* 去除每行第二个元素的右边距 */
            }

        .layui-form-label {
            width: 90px; /* 根据需要调整标签宽度 */
        }

        .layui-input-block, .layui-input-inline {
            margin-left: 70px; /* 确保输入框与标签对齐 */
        }

        .layui-form-select {
            width: 189px;
        }
    </style>


    <form class="layui-form" action="" style="margin:25px">
        <div class="layui-form-item layui-inline">
            <div class="layui-input-inline">
                <input type="text" id="userAccount" placeholder="账号" autocomplete="off" class="layui-input">
            </div>
            <button type="button" id="search" class="layui-btn layui-bg-blue" onclick="search()">查询</button>
            <button type="button" id="add" class="layui-btn layui-bg-red">高级查询</button>
            <button type="button" id="add" class="layui-btn layui-bg-green" lay-on="test-page-custom">新增</button>
        </div>
    </form>
    <div class="layui-form-item layui-inline">
        <table class="layui-table">
            <thead>
                <tr>
                    <td>账号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>头像</td>
                    <td>角色</td>
                    <td>注册时间</td>
                    <td>创建人</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>




    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script src="//unpkg.com/jquery/dist/jquery.js"></script>
    <script>

        $(function () {
            search()
        });


            
        function search() {
            var userAccount = $("#userAccount").val() || "";
            $.post({
                url: '@ViewBag.Darius'+"/api/Users/Handle/UsersSelect",
                data: JSON.stringify({ userAccount: userAccount }),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    console.log(res.data);
                    var content = "";
                    $.each(res.data, function () {

                        content += `<tr>
                                                  <td>${this.userAccount}</td>
                                                  <td>${this.usersName}</td>
                                                  <td>${this.gender? "女" : "男"}</td>
                                                  <td>${this.usersImage}</td>
                                                  <td>${this.roleName}</td>
                                                  <td>${this.usersDate.replace("T", " ").substring(0, 19)}</td>
                                                  <td>${this.createName}</td>
                                               </tr>`
                    })
                    $("tbody").html(content)
                }
            })

        }
    </script>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script>

        layui.use(function () {
            var $ = layui.$;
            var layer = layui.layer;
            var util = layui.util;
            var form = layui.form;
            // 事件
            util.on('lay-on', {
                'test-page-custom': function () {
                    layer.open({
                        type: 2,
                        area: ['600px', '600px'],
                        shadeClose: true,
                        title: '用户管理（新建）',
                        content: '/Users/UserAlertView',

                    });
                }
            });
        });

    </script>

</body>

</html>



